<style lang=less scoped>
	@import "../../variables.less";

	.content {
		border-radius: 6px;
		position: absolute;
		color: white;
		user-select: none;
		pointer-events: all;
		display: flex;
		flex-direction: column;

		.title {
			text-align: center;
			font-size: @fontSizeB;
			line-height: 50px;
			display: block;
			padding: 0;
		}

		.foot {
			flex-grow: 1;
			overflow: auto;
			flex-shrink: 0;
			max-height: 170px;
		}
	}

	.dragIcon {
		float: left;
		font-size: @fontSizeB;
		line-height: 50px;
		margin-left: 18px
	}

	.dragAttachIcon {
		float: right;
		font-size: @fontSizeB;
		margin-right: 18px;
		line-height: 50px;
		cursor: pointer
	}
	.roomDetails{
		border-radius: 5px;
		.title{
			font-size: 14px;
			border-radius: 5px 5px 0 0;
			padding: 0 10px;
			height: 30px;
			line-height: 30px;
			text-align: left;
			.dragAttachIcon{
				margin-right: 0;
				font-size: 25px;
				line-height: 30px;
			}
		}
		.foot{
			height: 30px;
			border-radius: 0 0 5px 5px;
		}
		li{
			font-size: 13px;
			padding: 0 10px;
			span{
				margin-left: 5px;
			}
		}
	}
</style>
<template>
	<div :style="{top:currentTop+'px',left: currentLeft+'px',width:width+'px',height: height+'px'}"
		class="content drag">
		<div @mousedown="startDrag" class="title">
			<i class="iconfont dragIcon" v-html="icon" />
			{{title}}
			<Icon @click.native="$emit('close')"
				class="dragAttachIcon"
				type="ios-close" v-if=showClose />
			<Icon @click.native="exportFunction"
				class="dragAttachIcon"
				type="ios-share-alt" v-else />
		</div>
		<div class="body">
			<slot />
		</div>
		<div class="foot">
			<slot name="foot" />
		</div>
	</div>
</template>

<script lang=ts>
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import { Icon } from "view-design";

	@Component({
		components: {
			Icon
		}
	})
	export default class Drag extends Vue {
		@Prop({ default: 0, type: Number }) readonly width!:number;
		@Prop({ default: 0, type: Number }) readonly height!:number;
		@Prop({ default: 0, type: Number }) readonly left!:number;
		@Prop({ default: 0, type: Number }) readonly top!:number;
		@Prop({ default: false, type: Boolean }) readonly showClose!:boolean;
		@Prop(String) readonly title!:string;
		@Prop(String) readonly icon!:string;
		@Prop(Function) readonly exportFunction!:Function;
		currentLeft:number = this.left;
		currentTop:number = this.top;
		private MainLink:HTMLLinkElement = document.createElement("link");

		startDrag ():void {
			const mouseMove = (ev:MouseEvent) => {
				this.currentLeft += ev.movementX;
				this.currentTop += ev.movementY;
			};
			document.addEventListener("mousemove", mouseMove);
			document.addEventListener("mouseup", ev => {
				document.removeEventListener("mousemove", mouseMove);
			}, { once: true });
		}

		renderCss () {
			less.render(lessFiles.drag, {
				javascriptEnabled: true,
				modifyVars: {
					"@baseColor": this.$store.state.baseColor,
					"path": "/static/UnityWeb/desktop/"
				},
				paths: [ "/static/UnityWeb/desktop/" ]
			}).then(data => {
				this.MainLink && this.MainLink.remove();
				const href:string = URL.createObjectURL(new Blob([ data.css ]));
				const link = document.createElement("link");
				link.href = href;
				link.rel = "stylesheet";
				document.head.appendChild(link);
				this.MainLink = link;
			});
		}

		mounted ():void {
			this.renderCss();
		}

		@Watch("$store.state.baseColor")
		onColorChange () {
			this.renderCss();
		}

		beforeDestroy () {
			this.MainLink && this.MainLink.remove();
		}
	}
</script>
